<template>
  <el-scrollbar>
    <div class="container" v-infinite-scroll="load">
      <div class="video_info">
        <el-tag>{{ info.user?.nickname }}</el-tag>
        <span class="name">{{ info.title + "-" + info.desc }}</span>
        <span class="author">{{ info.create_time }}</span>
      </div>
      <div class="video_play">
        <video autoplay controls :src="baseUrl + info.audio"></video>
      </div>
      <div class="comment">
        <div class="title">
          <span>评论</span>
          <span>（共{{ total }}条评论）</span>
        </div>
        <el-input
          v-model="comment"
          type="textarea"
          placeholder="说说你的看法吧"
          maxlength="300"
          :autosize="{ minRows: 3, maxRows: 6 }"
        />
        <div class="publish">
          <el-button size="small" type="primary">发表评论</el-button>
        </div>
        <div class="item" v-for="(item, index) in commentList" :key="index">
          <div class="user_info">
            <el-avatar :size="40" :src="baseUrl + item.user.avatar" />
            <div class="right">
              <span>{{ item.user.nickname }}</span>
              <span>{{ item.create_time }}</span>
            </div>
          </div>
          <div class="comment_info">
            <span>{{ item.content }}</span>
          </div>
          <div class="like">
            <el-icon
              @click="like(item, index)"
              :class="item.is_like ? 'is_like' : ''"
              size="18"
              ><Star
            /></el-icon>
          </div>
        </div>
      </div>
    </div>
  </el-scrollbar>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import {
  videoInfo,
  videoCommentIndex,
  videoLikeAdd,
  videoLikeDel,
} from "@/http/api";
import { PersistentStore } from "@/stores";

const baseUrl = import.meta.env.VITE_API_URL;
const comment = ref("");

const persistentStore = PersistentStore();
const videoId = computed(() => persistentStore.videoId);
const info = ref({});
const commentList = ref([]);
const page = ref(1);
const more = ref(true);
const total = ref(0);

onMounted(() => {
  getVideoInfo(videoId.value);
  getComment(videoId.value);
  window.addEventListener("message", (e) => {
    getVideoInfo(e.data);
    getComment(e.data);
  });
});

const getVideoInfo = async (e) => {
  const { data } = await videoInfo({
    id: e,
  });
  info.value = data.video;
};

const getComment = async (e) => {
  const { data } = await videoCommentIndex({
    video_id: e,
    page: page.value,
    limit: 10,
  });
  data.video_comment.data.length
    ? (commentList.value = data.video_comment.data)
    : (more.value = false);
  total.value = data.video_comment.total;
};

const like = async (e, i) => {
  if (e.is_like) {
    const { code } = await videoLikeDel({
      video_comment_id: e.id,
    });
    if (code == 200) {
      commentList.value[i].is_like = false;
    }
  } else {
    const { code } = await videoLikeAdd({
      video_comment_id: e.id,
    });
    if (code == 200) {
      commentList.value[i].is_like = true;
    }
  }
};

const load = () => {
  if (more.value) {
    page.value++;
    getComment();
  }
};
</script>

<style lang="scss" scoped>
@import "index.scss";
</style>
